<template>
	<div>
		<el-form :inline="true" size="mini">
			<el-form-item>
				<el-input v-model="keyword" placeholder="请输入员工id"></el-input>				
			</el-form-item>
			<el-form-item>
				<el-button type="primary" @click="getemp()">查询员工</el-button>
			</el-form-item>
		</el-form>
		
		<el-table style="100%" :data="list.data" v-if="show">
			<el-table-column label="姓名" width="200" >
					<template slot-scope="scope">
						<template>
							<span>{{scope.row.id}}</span>
						</template>
					</template>
				</el-table-column>
				
				<template slot-scope="scope">
					<template>
						<span>{{scope.row.name}}</span>
					</template>
				</template>
			</el-table-column>
			
			<el-table-column label="部门" width="200" >
				<template slot-scope="scope">
					<template v-if="scope.row.edit">
						<el-select placeholder="部门" v-model="type.id">
							<el-option
								v-for="item in post"
								:key = "item.id"
								:label="item.pname"
								:value="item.id"
							>
								
							</el-option>
						</el-select>
					</el-select>
					</template>
					<template v-else>
						<span>{{scope.row.post.pname}}</span>
					</template>
				</template>
			</el-table-column>
			
			<el-table-column label="操作" width="300">
				<template slot-scope="scope">
					<template v-if="scope.row.edit">
						<el-button @click="handleTypeSave(scope)" size="mini" type="primary">保存</el-button>
						<el-button size="mini" @click="scope.row.edit=false" type="danger">取消</el-button>
					</template>
					<template v-else>
						<el-button @click="handleTypeEdit(scope)" size="mini" type="primary">编辑</el-button>
					</template>					
				</template>
			</el-table-column>
			
		</el-table>
	</div>
</template>

<script>
export default{
		data(){
			return{				
				keyword:'',
				emp:{
					post:{}
				},
				show:false,
				type:{
					post:{}
				},
				post:{},
				list:{}
			}
		},
		methods:{
			getemp(){
				let url = "emp/getById";
				axios.post(url,`id=${this.keyword}`).then(resp=>{
					this.list = resp.data
					this.emp = resp.data.data
					this.show = true
				})
				
				let url2 = "post/getAll"
				axios.post(url2).then(resp=>{
					this.post = resp.data.data
				})
			},
			handleTypeEdit(scope){
				//console.log(scope.$index,scope.row);
				this.$set(scope.row,"edit",true);
				//对象克隆
				this.type = {...scope.row};
			},
			handleTypeSave(scope){
				let url = "emp/update";
				axios.post(url,this.emp).then(resp=>{
					if(resp.data.data == 1){
						scope.row.edit = false;
					}
				})
				
			},		
				
			},
		}
</script>

<style>
</style>
